<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SqlClient</title>
    <link href="/static/js/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet"/>
    <script src="/static/js/ext-all.js" type="text/javascript"></script>
    <script src="/static/js/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script src="/static/js/MyVTypes.js" type="text/javascript"></script>
    <script src="/static/js/utils.js" type="text/javascript"></script>

    <link href="/static/codemirror/lib/codemirror.css" rel="stylesheet"/>
    <link href="/static/codemirror/addon/hint/show-hint.css" rel="stylesheet"/>
    <link href="/static/codemirror/theme/idea.css" rel="stylesheet"/>

    <script src="/static/codemirror/lib/codemirror.js" type="text/javascript"></script>
    <script src="/static/codemirror/mode/sql/sql.js" type="text/javascript"></script>
    <script src="/static/codemirror/addon/hint/show-hint.js" type="text/javascript"></script>
    <script src="/static/codemirror/addon/hint/sql-hint.js" type="text/javascript"></script>
    <script src="/static/codemirror/addon/selection/active-line.js" type="text/javascript"></script>

    <script type="text/javascript">

       var localStore = new myLocalStore();
       var my_localStore = new Ext.state.LocalStorageProvider();
       var scenes_name = '';
       var seq_name = '';

       function init_page(scenes_name, seq_name) {
           scenes_name = scenes_name;
           seq_name = seq_name;
           //console.log('新的 scenes_name: ' + scenes_name);
           //console.log('新的 node_seq_name: ' + seq_name);
           /*
           var node_obj = my_localStore.get('node_seq_name');
           if (node_obj != null) {
               var scenes_obj = my_localStore.decodeValue(node_obj);
               scenes_name = scenes_obj.scenes_name;
               seq_name = scenes_obj.seq_name;
               console.log('scenes_name: ' + scenes_name);
               console.log('node_seq_name: ' + seq_name);
           } else {
               return;
           }
           */
       }

       Ext.define('cn.plus.tree.Panel', {
                   extend: 'Ext.tree.Panel',
                   autoScroll: true,
                   url: '',
                   listeners: {
                       "itemexpand": function (node, event) {
                           //console.log(node);
                           //console.log(event);
                           if (node.isLeaf()) {
                                event.stopEvent();
                                node.toggle();
                            }
                       },
                       'itemclick': function (node, record, item, index, e, eOpts) {
                         //e.stopEvent();
                           console.log(node);
                           console.log(record);
                        },
                       'afterlayout': function(treePanel, eOpts){
                            var emBody = document.getElementById(treePanel.body.id);
                            var emView = document.getElementById(treePanel.getView().id);
                            var emTable = document.getElementById(treePanel.getView().id).childNodes[0];
                            if(emTable != undefined){
                                var emTableW = emTable.style.width;
                                var newEmTableW = parseInt(emTable.style.width.substr(0,emTableW.length-2))-20;
                                emTable.style.width = newEmTableW+"px";
                                emTable.style.tableLayout = 'auto';
                                emTable.style.borderCollapse = 'separate';
                            }
                            emView.style.overflow = 'visible';
                            if(treePanel.treeGrid != 'Y'){
                                emView.style.overflowX = 'auto';
                            }else{
                                emView.style.overflowX = 'hidden';
                            }
                            emView.style.overflowY = 'auto';
                            emView.style.position = 'relative';
                            var emDivArr = emBody.parentNode.getElementsByTagName("div");
                               for(var i = 0; i < emDivArr.length; i++){
                                   var emDiv = emDivArr[i];
                                   if(emDiv.id.indexOf("gridscroller") == 0 && emDiv.className.indexOf("x-scroller-vertical") > 0){
                                       /*if(emDiv.parentNode != null){
                                           emDiv.parentNode.removeChild(emDiv);
                                       }*/
                                       emDiv.style.width = "0px";
                                       emView.style.width = treePanel.getWidth()+"px";
                                       emBody.style.width = treePanel.getWidth()+"px";
                                   }
                               }
                         }
                   },
                   //rootVisible: false,
                   initComponent: function () {
                       var me = this;

                       var store = Ext.create('Ext.data.TreeStore', {
                           autoLoad: false,
                           clearOnLoad: true,
                           clearRemovedOnLoad: true,
                           nodeParam:'id',
                           proxy: {
                               type: 'ajax',
                               //url: '/extjs_case/get_tree_store/',
                               url: me.url,
                               reader: {
                                   type: 'json',
                                   root: 'root'
                               }
                           },
                           root: {
                               expanded: true,
                               text: '根节点'
                           }
                       });

                       var base_config = {
                           store: store
                       };

                       Ext.apply(this, base_config);
                       this.callParent();
                   }
               });

       Ext.application({
           name: 'MyEdit',
           launch: function() {

               var node_obj = my_localStore.get('node_seq_name');
               if (node_obj != null) {
                   var scenes_obj = my_localStore.decodeValue(node_obj);
                   scenes_name = scenes_obj.scenes_name;
                   seq_name = scenes_obj.seq_name;
                   console.log('scenes_name: ' + scenes_name);
                   console.log('node_seq_name: ' + seq_name);
               }

               var editor;

               var store = null;

               // 每页显示条数下拉选择框
               var pagesize_combo = null;
               var number = 50;
               // 分页工具栏
               var bbar = null;
               var grid = null;

               /**
                * 生成一个 textarea
                * */
               Ext.DomHelper.append(document.body, {tag: 'textarea', id: 'code_area'});

               var code_area_panel = Ext.create('Ext.panel.Panel', {
                   anchor: '100%',
                   resizable: {
                       handles: 's'
                   },
                   listeners: {
                       resize: function(obj, width, height, oldWidth, oldHeight, eOpts){
                           if (typeof(editor) != 'undefined' && editor)
                           {
                               editor.setSize('auto', height + 'px');
                           }
                       }
                   },
                   contentEl: 'code_area'
               });

               var source = {"users": ["id", "name"], "dbs": ["id", "name"]};
               //var source = eval('(' + document.getElementById('table_info').innerText + ')');

               var edit_form = Ext.create('Ext.form.Panel', {
                   /**
                    * 定义 eidt form
                    * */
                   id: 'edit_form',
                   itemId: 'edite_win',
                   layout: "form",
                   defaults: {
                       anchor: '100%'
                   },
                   buttonAlign: "center",
                   labelAlign: "right",
                   items: [code_area_panel, {
                       id: 'p_grid',
                       itemId: 'p_grid',
                       bodyStyle :'overflow-x:hidden;overflow-y:scroll',
                       //height: 480,
                       //bodyStyle:'overflow-x:hidden;overflow-y:auto;',
                       border: true,
                       hidden: true
                   }, {
                       itemId: 'p_error',
                       hidden: true
                   }],
                   listeners: {
                       "afterrender": function (m) {
                           //var pg = Ext.getCmp('p_grid');
                           //console.log(pg);
                           //Ext.getCmp('p_error').hide();
                       }
                   }
               });

               // 右导航
               var tbar = Ext.create('Ext.toolbar.Toolbar', {
                   enableOverflow: true,
                   items: [{
                       text: '运行',
                       handler: function () {
                           var vs = Ext.String.trim(editor.getSelection());
                           if (vs == '') {
                               vs = Ext.String.trim(editor.getValue());
                           }

                           Ext.MessageBox.alert('提示', vs);
                       }
                   }, '-', {
                       text: '保存到数据库',
                       handler: function () {
                           var vs = Ext.String.trim(editor.getSelection());
                           if (vs == '') {
                               vs = editor.getValue();
                           }

                           if (vs == '') {
                               Ext.MessageBox.alert('提示', '设置节点的内容为空！');
                               return;
                           }

                           var sql_node = localStore.findSql_node(scenes_name, seq_name);
                           if (sql_node != null && sql_node['is_run'] == 0)
                           {
                               Ext.MessageBox.alert('提示', '代码必须执行确保正确后才能保存！');
                               return;
                           }

                           if (seq_name == '')
                           {
                               Ext.MessageBox.alert('提示', '节点名字必须为空！');
                               return;
                           }

                           if (seq_name != '' && vs != '' && sql_node != null && sql_node['is_run'] == 1) {
                               window.parent.add_to_node(scenes_name, seq_name, vs);
                           }
                       }
                   }]
               });

               Ext.create('Ext.Viewport', {
                   layout: 'border',
                   title: 'MyPlus 的主界面',
                   defaults: {
                       //collapsible: true,
                       split: true
                   },
                   listeners: {
                       mouseUp: function () {
                           console.log('OK');
                       }
                   },
                   items: [{
                       xtype: 'panel',
                       region: 'north',
                       height: 30,
                       border: false,
                       tbar: tbar
                   }, {
                       region: 'west',
                       itemId: 'west_panel',
                       xtype: 'panel',
                       title: '提示',
                       width: 200,
                       split: true,
                       collapsible: true,
                       floatable: true,
                       scroll: 'both',
                       autoScroll: true,
                       items: [Ext.create('cn.plus.tree.Panel', {url: '/tree/'})]
                   }, {
                       region: 'center',
                       xtype: 'panel',
                       id: 'panel_panel',
                       //itemId: 'panel_panel',
                       items: [edit_form],
                       listeners: {
                           afterrender: function (obj) {
                               editor = CodeMirror.fromTextArea(document.getElementById('code_area'), {//根据DOM元素的id构造出一个编辑器
                                   lineNumbers: true,
                                   styleActiveLine: true,
                                   theme: "idea",//设置主题
                                   mode: 'text/x-mysql',
                                   //mode : 'text/x-plsql',
                                   hintOptions: {tables: source}
                               });
                               editor.setSize('auto', '227px');
                               editor.on("keyup", function (cm, event) {
                                   if (!cm.state.completionActive//所有的字母和'$','{','.'在键按下之后都将触发自动完成
                                       && ((event.keyCode >= 65 && event.keyCode <= 90)
                                           || event.keyCode == 52 || event.keyCode == 219
                                           || event.keyCode == 190)) {
                                       CodeMirror.commands.autocomplete(cm, null, {
                                           completeSingle: false
                                       });
                                   }

                                   var sql_node = localStore.findSql_node(scenes_name, seq_name);
                                   if (sql_node != null) {
                                       sql_node.sql = editor.getValue();
                                       localStore.updateNode(scenes_name, sql_node);
                                   }
                               });

                               var sql_node = localStore.findSql_node(scenes_name, seq_name);
                               if (sql_node != null && sql_node.sql != '') {
                                   editor.setValue(sql_node.sql);
                               }
                           }
                       },
                       bodyStyle :'overflow-x:hidden;overflow-y:scroll',
                       hidden: false
                   }]
               });
           }
       });
    </script>
</head>
<body>
<div id="table_info" style="display:none;">
       {{ obj }}
    </div>
</body>
</html>